<template>
  <div>
    <!-- 
      验证计算属性的缓存优势

      总结：
        1、计算属性调用后，会立刻把结果缓存起来
        2、当再次调用计算属性的时候，直接从缓存中获取结果渲染到页面上
        3、提高渲染性能
        4、对于普通函数，调用多少次函数，就执行多少次函数
     -->
    <!-- 利用两种方法实现字符串翻转效果，来验证计算属性的缓存优势 -->
    <div>{{ reverseStr }}</div>
    <div>{{ reverseStr }}</div>
    <div>{{ reverseStr }}</div>
    <div>{{ reverseFn() }}</div>
    <div>{{ reverseFn() }}</div>
    <div>{{ reverseFn() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world!",
    };
  },
  computed: {
    reverseStr() {
      console.log("计算属性被执行了");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    reverseFn() {
      console.log("函数被执行了");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>